<template>
	<view>
		<cmd-nav-bar title="首页"></cmd-nav-bar>
		<cmd-page-body type="top">
			<!-- 轮播图 -->
			<view class="swiper-home">
				<u-swiper
				    :list="swiperList"
					previousMargin="20"
					nextMargin="20"
					radius="5"
					autoplay
					indicator
					indicatorMode="line"
					circular
					bgColor="#ffffff"
					@click="toSwiper">
				</u-swiper>
			</view>
			<!-- 菜单 -->
			<view class="menu-list">
				<view
					class="menu"
					v-for="(row, index) in menuList"
					:key="index"
					@tap="toMenu(row)"
				>
					<view class="image"><image :src="row.image"></image></view>
					<view class="title">{{ row.title }}</view>
				</view>
			</view>
			<!-- 推荐 -->
			<view class="news-box">
				<uni-section title="推荐" type="line"></uni-section>
				<!-- 顶部提示 -->
				<!-- #ifdef MP-WEIXIN -->
				<tui-tips ref="toast"></tui-tips>
				<!-- #endif -->
				<uni-list>
					<!-- title、note设置标题和小文字 -->
					<uni-list-item direction="row" v-for="item in newsList" :key="item.id" :title="item.title" :note="'来源：'+item.createBy" 
					@click="toNews(item)" link>
						<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
						<template v-slot:header>
							<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
							<image class="news-image" :src="item.thumbnail" mode="aspectFill"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
				<uni-load-more :status="statusLoadMore" />		
			</view>
		</cmd-page-body>
		<!-- 底部导航栏 -->
		<tabbar :valueModel="0"></tabbar>
	</view>
</template>

<script>
	import {getAdList, getNewsPage} from '@/common/api'
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	export default {
		components:{
			cmdNavBar,
			cmdPageBody
		},
		data() {
			return {
				// 轮播图
				swiperList: [],
				// 菜单
				menuList: [
					{
						title: "敬请期待",
						image: "/static/img/menu/c1.png",
						url: "菜单1地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c2.png",
						url: "菜单2地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c3.png",
						url: "菜单3地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c4.png",
						url: "菜单4地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c5.png",
						url: "菜单5地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c6.png",
						url: "菜单6地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c7.png",
						url: "菜单7地址"
					},
					{
						title: "敬请期待",
						image: "/static/img/menu/c8.png",
						url: "菜单8地址"
					}
				],
				// 新闻列表
				statusLoadMore:"more",
				params: {
					page: 1,
					limit: 5,
					count: 0
				},
				newsList: []
			}
		},
		created() {},
		onLoad() {
			// 隐藏底部
			uni.hideTabBar();
			// 初始化数据
			this.initData();
		},
		methods: {
			/**
			 * 下拉刷新回调函数
			*/
			onPullDownRefresh() {
				// 初始化数据
				this.initData();
			},
			/**
			 * 上拉加载更多
			*/
			onReachBottom() {
				if (this.params.count === this.newsList.length) {
					// 显示没有更多数据了
					this.statusLoadMore = "nomore"
				} else {
					// 请求下一页数据
					this.getList();
				}
			}, 
			/**
			 * 初始化数据
			 */
			initData() {
				// 获取轮播图
				this.getAd();
				// 请求新闻接口
				this.params.page = 1;
				this.newsList = [];
				this.getList();
			},
			getAd() {
				// 顶部提示
				let options = {
					title: "加载成功~",
					duration: 1000
				};
				uni.showLoading(options);
				// 请求轮播图数据
				getAdList().then(res => {
					if (res.code == 200) {
						this.swiperList = res.data;
						uni.hideLoading()
					} 
				})
			},
			getList() {
				// 显示加载中
				this.statusLoadMore = "loading"
				// 获取新闻列表
				getNewsPage(this.params).then(res => {
					if (res.code == 200) {
						this.params.count = res.data.count;
						this.newsList = [...this.newsList, ...res.data.data];
						this.params.page++
						this.statusLoadMore = "nomore"
						uni.stopPullDownRefresh();
					} 
				})	
			},
			toMenu(item) {
				uni.showToast({
					title: item.url,
					duration: 3000
				});
			},
			toNews(item) {
				uni.navigateTo({
					url: '/pages/news/detail/detail?id=' + item.id
				})
			},
			toSwiper(item) {
				uni.navigateTo({
					url: '/pages/ad/detail/detail?id=' + this.swiperList[item].id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-home {
		width:100%;
		margin-top: 20px;
		background-color: #fff;
	}
	.menu-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;	
		.menu {
			width: 25%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;
			.image {
				width: 100%;
				display: flex;
				justify-content: center;
				image {
					width: 9vw;
					height: 9vw;
				}
			}
			.title {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}
	.news-box {
		width: 100%;
		background-color: #fff;
		.news-image {
			flex-shrink: 0;
			margin-right: 10px;
			width: 125px;
			height: 75px;
			border-radius: 6px;
			overflow: hidden;
			border: 1px #f5f5f5 solid;
		}	
	}
</style>
